<template>
     <a-modal :title="title" :width="640" :visible="visible" :confirmLoading="submitLoading" @ok="handleOk" @cancel="visible=false">
        <a-form layout="vertical" :form="events_form">
            <a-form-item label="上级部门">
                <a-tree-select
                showSearch
                allowClear
                :disabled="id?true:false"
                treeNodeFilterProp="title"
                style="width:100%"
                :tree-data="orgData"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto'}"
                :replace-fields="orgFields"
                @change="orgChange"
                v-decorator="['parentOrgId']"
                placeholder="请选择上级部门">
                </a-tree-select>
            </a-form-item>
        </a-form>
        <form-create v-model="form.fApi" :rule="form.rule" :option="form.option"/>
    </a-modal>
</template>

<script>
import md5 from 'md5'
import store from '@/store'
import { mapGetters,mapActions } from 'vuex'
import {
     addDepartment,
     editDepartment
} from '@/api/human/department'
import {
    FORM_PEPARTMENT
} from './form'
import {OPTION_BLOCK,OPTION_INLINE} from "../base_form"
export default {
  name: 'addDepartment',
  data(){
    return {
        form:{
          fApi:{},
          rule:[],
          option:OPTION_BLOCK
        },
        visible:false,
        title:'',
        id:'',
        submitLoading:false
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, { name: 'events_form' });
  },
  computed: {
    ...mapGetters(['userInfo','orgFields','orgData','staffData']),
  },
  methods: {
    async add(rows){
        this.form.rule = FORM_PEPARTMENT;
        this.submitLoading = false;
        this.title = rows === true ? '新增部门':'编辑部门';
        this.id = rows === true ? '' : rows.id;
        this.$nextTick(()=>{
            this.form.fApi.resetFields();
            this.events_form.resetFields();
            let manager = this.form.fApi.getRule('manager');
            manager.options = this.staffData;
        })
        if(rows!==true){
             this.$nextTick(() => {
                this.events_form.setFieldsValue({"parentOrgId":rows.parentOrgId == -1 ? '':rows.parentOrgId});
                let values = this.form.fApi.formData();
                values.parentOrgName = rows.parentOrgName;
                values.name = rows.name;
                values.description = rows.description;
                if (rows.manager) {
                    values.manager = rows.manager.split(',')
                } else {
                    values.manager = []
                }
                this.form.fApi.setValue(values);
            });
        }
        this.visible = true;
    },
    orgChange(value, label, extra){
        this.form.fApi.getRule('parentOrgName').value = label[0];
    },
    handleOk(){
        const that = this;
        const values = this.events_form.getFieldsValue();
        this.form.fApi.submit(async (formData, $f) => {
            try {
                if(that.id){
                    formData.id = that.id;
                }
                formData.parentOrgId = values.parentOrgId ? values.parentOrgId:-1;
                formData.manager = formData.manager.join(',');
                that.submitLoading = true;
                const {code} = that.id ? await editDepartment(formData) : await addDepartment(formData);
                that.submitLoading = false;
                if(code === '1'){
                    that.visible = false;
                    that.$emit('on-ok',true)
                }
            } catch (error) {
                that.$warning({
                    title: '网络不稳定，重试或者联系管理员',
                    okText: '关闭'
                });
            }
        })
    }
  }
}
</script>

